@use "../../../../styles/mixins/eui";

* div,
* span {
  font-family: "Graphik", sans-serif !important;
}

html {
  background-color: var(--euiPageBackgroundColor) !important;
}

.container {
  @include eui.scrollBar;
  flex: auto;
  overflow: auto;
  max-height: 810px;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 16px 20px;

  font:
    normal normal normal 13px/18px Graphik,
    sans-serif;
  text-align: left;
  letter-spacing: 0;
  color: var(--textColorShade);

  background-color: var(--euiPageBackgroundColor);

  z-index: 10;
}
.responseFail {
  display: inline-block;
  padding: 16px 20px;
  color: var(--euiColorColorDanger) !important;
  font-size: 14px;
  word-break: break-word;
}

.queryHeader {
  display: flex;
  align-items: center;

  .matched {
    margin-right: 12px;
  }
}

.matched {
  color: var(--euiColorFullShade);
  padding-bottom: 12px;
  font: normal normal 500 13px/19px;
}

.table,
.tableInfo {
  .euiFlexGroup--justifyContentSpaceBetween {
    display: none;

    // hide <PerPageComponent/>  option {hidePerPageOptions} doesn't work
    // with dynamic changing prop "pagination" for In-memory table
    .euiFlexItem:first-child {
      display: none;
    }
  }

  &.tableWithPagination {
    .euiFlexGroup--justifyContentSpaceBetween {
      display: flex;
    }
  }
}

.tableInfo {
  padding: 16px 0;
}

.tooltipContainer {
  max-width: 100%;
}

.tooltip {
  max-width: 100%;

  display: inline-block !important;
}

.cell {
  position: relative;
}

.row {
  display: block;
  padding-bottom: 10px;
  word-break: break-word;

  &:last-of-type {
    padding-bottom: 0;
  }
}

.badge {
  display: inline-flex !important;
  position: relative;
  font: normal normal normal 12px/15px;
  margin: 0 5px;
  top: -2px;
}

.icon {
  position: relative;
  margin: 0 auto;

  @media only screen and (max-width: 767px) {
    margin: 0;
  }
}
